<template>
  <div class="driver" @click.prevent.stop="handleGuild">
    <i class="iconfont icon-zhifeiji"></i>
  </div>
</template>

<script>
import { defineComponent, onMounted, watch } from 'vue'

import { headerStore } from '../../store/head'

import i18n from '../../i18n'
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
import { steps } from './step'
export default defineComponent({
  setup() {
    let driver = null
    const t = i18n.global.t
    const headerstore = headerStore()
    onMounted(() => {
      driver = new Driver({
        animate: false, // Whether to animate or not
        opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
        padding: 4, // Distance of element from around the edges
        allowClose: true, // Whether the click on overlay should close or not
        overlayClickNext: false, // Whether the click on overlay should move next
        doneBtnText: t('driver.doneBtnText'), // Text on the final button
        closeBtnText: t('driver.closeBtnText'), // Text on the close button for this step
        stageBackground: '#ffffff', // Background color for the staged behind highlighted element
        nextBtnText: t('driver.nextBtnText'), // Next button text for this step
        prevBtnText: t('driver.prevBtnText') // Previous button text for this step
      })
    })
    const handleGuild = () => {
      driver.defineSteps(steps(t))
      driver.start()
    }
    watch(
      () => headerstore.lang,
      () => {
        driver = new Driver({
          animate: false, // Whether to animate or not
          opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
          padding: 4, // Distance of element from around the edges
          allowClose: true, // Whether the click on overlay should close or not
          overlayClickNext: false, // Whether the click on overlay should move next
          doneBtnText: t('driver.doneBtnText'), // Text on the final button
          closeBtnText: t('driver.closeBtnText'), // Text on the close button for this step
          stageBackground: '#ffffff', // Background color for the staged behind highlighted element
          nextBtnText: t('driver.nextBtnText'), // Next button text for this step
          prevBtnText: t('driver.prevBtnText') // Previous button text for this step
        })
      },
      {
        deep: true,
        immediate: true
      }
    )
    return {
      handleGuild
    }
  }
})
</script>

<style lang="scss" scoped>
.icon-zhifeiji {
  font-size: 32px;
  margin-right: 10px;
  color: #1296db;
}
</style>
